{layout name="common/base" }
<style>
    body {
        background: #ffffff;
    }

    .layui-inline {
        border: 1px solid #eee;
        width: 170px;
        height: 330px;
        margin-right: 12px;
        line-height: 1.9;
        text-indent: 12px;
        overflow: hidden;
    }

    .layui-inline ul li {
        cursor: pointer;
    }

    .active {
        color: #009688;
    }

    .more-right {
        width: 400px;
    }

    .spec-title {
        border-bottom: 1px solid #ccc;
        height: 42px;
        line-height: 42px;
        box-sizing: border-box;
    }

    .layui-btn-normal {
        color: #fff;
    }

    .tip-font {
        margin: 126px 0 0 100px;
    }

</style>
<div class="layui-inline">
    <div class="spec-title">选择规格[单选]</div>
    <div class="layui-input-inline">
        <div class="layui-side-scroll">
            <ul class="spec-left">
                {volist name="list['data']" id="vo"}
                <li class="child-ele" data-id="{$vo.id}">{$vo.name}</li>
                {/volist}
            </ul>
        </div>
    </div>
</div>

<div class="layui-inline more-right">
    <div class="spec-title">选择规格值[可多选]
        <input type="text" id="add-spec-tags" style="padding-left: 5px; width: 252px;margin-left: 10px;display:inline-block;"
               placeholder="新增规格名、按回车键确定添加" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-input-inline">
        <div class="spec-right">
            <p class="tip-font">请选择左侧规格列表</p>
        </div>
    </div>
</div>

<div class="layui-input-block"></div>
<button class="layui-btn classify-btn" style="margin-left:240px;">确 定</button>
<script src="__PUBLIC__/js/common.js?b41"></script>
<script>
    var isInputVal = false;
    var cls = ''; //点击时父级的class
    layui.use(['form'], function () {
        var request = getRequest();

        cls = request['cls'];

        //  点击获取而已
        $('body').on('click', '.child-ele', function () {

            $(this).parent().children('li').removeClass('layui-btn-normal');
            $(this).addClass('layui-btn-normal');

            //var index = $(this).attr('data-index');
            specs_id = $(this).attr('data-id');
           // let projectArr = moke[index]['project'].split(',')

            var url = "{:url('store.SpecsValue/getBySpecsId')}?specs_id="+specs_id;

            layObj.get(url, function (res) {
                var html = '';
                projectArr = res.data;
                projectArr.forEach(function (item) {
                    html += '<button type="button" data-specs-value-id="'+item.id+'"  data-specs-value-id="'+item.id+'" class="layui-btn layui-btn-sm layui-btn-normal" style="margin-top: 12px"> <b>' + item.name + '</b><i class="layui-icon del-child-tags" style="padding-left: 12px;"></i></button>';
                });
                $specleft = $('.spec-right')
                $($specleft).html(html)
            });

            isInputVal = true
            // let html = ''
            // projectArr.forEach(function (item, index) {
            //     html += '<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" style="margin-top: 12px"> <b>' + item + '</b><i class="layui-icon del-child-tags" style="padding-left: 12px;"></i></button>'
            // })
            // $specleft = $('.spec-right')
            // $($specleft).html(html)
        })

        // 删除规格值按钮
        $('html').on('click', '.del-child-tags', function () {
            $(this).parent().remove()
            // var index = parent.layer.getFrameIndex(window.name);
            // parent.layer.close(index);
        })

        // 添加规格标签
        $('#add-spec-tags').on('keypress', function (e) {
            if (!isInputVal) {
                return layer.msg('请点选左侧规格名称')
            }
            if (e.which === 13) {
                var tags = $(this).val();
                url = "{:url('store.SpecsValue/save')}?specs_id="+specs_id+"&name="+tags;
                layObj.get(url, function (res) {
                    if(res.code != 1) {
                        layer.msg("添加失败，请稍候重试");
                        return false;
                    }
                    var tag = '<button type="button" data-specs-value-id="'+res.data.id+'" class="layui-btn layui-btn-sm layui-btn-normal" style="margin-top: 12px"><b>' + tags + '</b> <i class="layui-icon del-child-tags" style="padding-left: 12px;"></i></button>';
                    
                    $('.spec-right').append(tag)
                    $(this).val('');
                });

            }
        })


        // 提交规格值到商品页面
        $('html').on('click', '.classify-btn', function () {
            let spec_left_name = '';
            let spec_left_id = 0;
            // 左侧规格类目
            let spec_left = $('.spec-left').children('li')
            spec_left.each(function (index, item) {
                if ($(item).hasClass('layui-btn-normal')) {
                    spec_left_name = $(item).text()
                    spec_left_id = $(item).attr('data-id')
                }
            })

            // 右侧规格值
            let spec_right = $('.spec-right').find('button')
            let tmp = ''
            let spec_tmp = ''

            spec_right.each(function (index, item) {
                let name = $(item).children('b').text()
                let specs_value_id = $(item).attr('data-specs-value-id');
                tmp += `<li class="layui-badge layui-bg-blue" propvalid="${specs_value_id}">${name}</li>`
                spec_tmp += `<li><label><input type="checkbox" style="display:block;" class="sku_value" lay-ignore  propvalid="${specs_value_id}" value="${name}"/>${name}</label></li>`
            });

            // 给父级 赋值
            parent.$('.' + cls).find('input').val(spec_left_name)
            parent.$('.' + cls).find('input').attr('data-id', spec_left_id);
            parent.$('.' + cls).find('input').attr('data-name', spec_left_name);
            parent.$('.' + cls).find('ul').html(tmp);

            let conf = `<ul class="SKU_TYPE del-${cls}" >
                                    <li is_required='1' propid='${spec_left_id}' sku-type-name="${spec_left_name}"><em>*</em>${spec_left_name}</li>
                                </ul>
                                <ul class="del-${cls}">
                                    ${spec_tmp}
                                </ul>
                                <div class="clear"></div>`;


            parent.$('.skus-warp').append(conf)
            // window.parent.location.reload();//刷新父页面
            var index = parent.layer.getFrameIndex(window.name);

            parent.layer.close(index);
        })


    })


    function getRequest() {
        let url = location.search; //获取url中"?"符后的字串
        console.log("url:" + url);
        let theRequest = {};
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }
</script>
